<template>
	<view>
		<view style="padding-bottom: 200rpx;">
			<view class="w-p-100 vh-40 bg-eee flex flex-center flex-column border-bottom-999">
				<image class="w-100 h-100 img_flex" :src="detail?.cover_image"></image>
				<text class="fw-600 fs-26 my-6">{{detail?.name}}</text>
				<text class="text-999 fs-15 mt-12">{{detail?.desc}}</text>
			</view>
			<view class="p-20 bg-white">
				<view class="border-bottom-eee py-10">
					<text class="fs-20 my-20">群成员</text>
					<view class="py-10 flex flex-wrap grid-columns-5 grid-gap-8">
						<image class="w-60 h-60 round-4 img_flex" :src="item.avatar" v-for="(item,index) in userList"
							:key='index'></image>
						<view class="flex flex-center">
							<image class="w-30 h-30 round-4 img_flex" src="@/static/icon/slh.png"></image>
						</view>
					</view>
				</view>
				<view class="border-bottom-eee py-10">
					<text class="fs-20 my-20">群简介</text>
					<view class="py-10">
						<mp-html :content='detail?.introduce'></mp-html>
					</view>
				</view>
				<view class="border-bottom-eee py-10">
					<text class="fs-20 ">入群福利</text>
					<view class="py-10">
						<mp-html :content='detail?.welfare'></mp-html>
					</view>
				</view>
				<view class=" py-10">
					<text class="fs-20 ">常见问题</text>
					<view class="py-10">
						<mp-html :content='detail?.question'></mp-html>
					</view>
				</view>
				<text class="text-999 fs-17 py-10">阅读{{detail?.page_view}}</text>
				<view class="flex flex-x-space-between flex-y-center mt-20">
					<view class="flex grid-gap-8">
						<view class="flex flex-y-center ">
							<view class="iconfont icon-hezi fs-19" style="color: #425887;"></view>
							<text>代理</text>
						</view>
						<view class="flex flex-y-center ml-8">
							<view class="iconfont icon-jiahuojubao fs-19" style="color: #425887;"></view>
							<text>举报</text>
						</view>
					</view>

					<view class="flex grid-gap-8 fs-14">
						<view class="flex flex-y-center ">
							<view class="iconfont icon-dianzan fs-19" style="color: #425887;"></view>
							<text>{{detail?.likes}}</text>
						</view>
						<view class="flex flex-y-center ml-8">
							<view class="iconfont icon-shoucang fs-19" style="color: #425887;"></view>
							<text>{{detail?.collect}}</text>
						</view>
					</view>
				</view>
			</view>

			<view>
				<view class="flex flex-x-space-between  p-12">
					<text>群友评论({{commentCount}})</text>
					<view class="flex flex-y-center">
						<text>查看更多</text>
						<view class="iconfont icon-youjiantou text-666 fs-14 "></view>
					</view>
				</view>
				<view class="px-20">
					<z-paging ref='paging' v-model="commentList" use-page-scroll @query="getComment" :auto="false"
						:refresher-enabled='false'>
						<view class="flex flex-x-space-between" v-for="(item,index) in commentList" :key='index'>
							<view class="flex flex-1 flex-y-center">
								<image :src="item.avatar" class="w-50 h-50 round-circle"></image>
								<view class="flex flex-column ml-10 grid-gap-5">
									<text class="text-999 fs-15">{{item.nickname}}</text>
									<text class="fs-17">{{item.content}}</text>
								</view>
							</view>
							<view class="flex flex-y-center">
								<view class="iconfont icon-dianzan" style="#425887"></view>
								<text class="text-666 fs-13">{{item.likes}}</text>
							</view>
						</view>
					</z-paging>
				</view>
			</view>
		</view>

		<view class="px-30 position-fixed bottom-10 w-p-100 box-sizing pb-safe-area" style="z-index: 9999;">
			<button class="text-white round-30  fw-600 animated-box  fs-17 py-4" @click="submit"
				:style="`background-color:${detail?.button_color}`" v-if='detail?.type==1'>
				{{detail?.price+' ' + detail?.button_text}}
			</button>
			<button class="text-white round-30  fw-600 animated-box  fs-17 py-4" @click="submit"
				:style="`background-color:${detail?.button_color}`" v-if='detail?.type==2'>
				{{USERINFO?.is_vip=='1'?'加入群聊':"成为VIP"}}
			</button>
			<button class="text-white round-30  fw-600 animated-box  fs-17 py-4" @click="submit"
				:style="`background-color:${detail?.button_color}`" v-if='detail?.type==3'>
				免费加入群聊
			</button>
		</view>

		<image style="width: 64rpx;height: 64rpx;top: 10%;" class="position-fixed right-15 red"
			src="@/static/icon/red.png" v-if='detail?.dealer_status=="1"' @click="$page.open('/pages/user/invite')">
		</image>
		<y-popup v-if='popupShow' :mode="'bottom'" @close='popupShow=false' round='16rpx'>
			<view class="p-30 bg-white box-sizing vw-100 flex flex-column text-center grid-gap-10">
				<image :src="code.image" show-menu-by-longpress class="w-p-100" mode="widthFix"></image>
				<text class="fs-13 fw-600 " style="color: #ed3e3e; ">{{WEBCONFIG?.tips}}</text>
				<view class="round-30 w-p-100 text-center py-8 text-white fs-13" style="background-color: #35b93a;"
					@click="popupShow=false">
					我已阅读并知晓
				</view>
			</view>
		</y-popup>

		<y-popup v-if='popupCountShow' @close='popupCountShow=false' round='16rpx'>
			<view class="p-30 flex flex-column text-center">
				<text class="fs-20 text-333">{{count}}</text>
				<text class="fs-12 text-999 mt-10">订单状态查询中...</text>
			</view>
		</y-popup>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { $http, $tool, $page } from '@/utils/index';
	import { ref } from 'vue';
	import { pay } from '@/utils/pay.js'
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const detail = ref()
	const popupShow = ref(false)
	const popupCountShow = ref(false)
	const count = ref(10)
	const code = ref()
	const commentList = ref([])
	const commentCount = ref(0)
	const userList = ref([])
	const paging = ref()
	onLoad((e) => {


		if (!e.id) {
			uni.showModal({
				title: '温馨提示',
				content: '系统错误'
			})
		} else {
			if (!e.oid) {
				e.oid = 0
			}
			getDetail(e.id, e.oid)

		}
		getUserInfo()
	})
	const getDetail = (id, oid = 0) => {
		$http.get('Community/getDetail', { id: id }).then(res => {
			detail.value = res.data
			uni.setNavigationBarTitle({
				title: detail.value.name
			})
			paging.value.reload()
			userList.value = res.data.user
			if (oid != 0) {
				popupCountShow.value = true
				getStatus(oid)
			}
		})
	}

	const getComment = (page, limit) => {
		$http.get('Virtual/getComment', { page: page, limit: limit, community_id: detail.value.id }).then(res => {
			paging.value.complete(res.data.list)
			commentCount.value = res.data.count
		})
	}

	const submit = () => {
		// #ifdef MP-WEIXIN
		if (!USERINFO.value) {
			uni.showModal({
				title: '温馨提示',
				content: '请先登录',
				success(res) {
					if (res.confirm) {
						$page.open('/pages/user/login')
					}
				}
			})
			return;
		}
		// #endif

		// #ifdef H5
		if ($tool.isWeChatEnv() && WEBCONFIG?.value.state == 1 && !USERINFO?.value) {
			uni.showModal({
				title: '温馨提示',
				content: '请先登录',
				success() {
					if (res.confirm) {
						$page.open('/pages/user/login')
					}
				}
			})
			return;
		} else {
			if (detail.value.type == 2) {
				uni.showModal({
					title: '温馨提示',
					content: 'VIP社群需登录,请在微信浏览器中打开'
				})
				return;
			}
		}
		// #endif

		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		if (detail.value.type == 2) {
			if (USERINFO.value.is_vip == '2') {
				$page.open('/pages/vip/detail')
			} else {
				getQrCode()
			}
			return;
		}
		if (WEBCONFIG.value.is_repeat == '1') {
			createOrder()
		} else {
			$http.get('Order/getOrder', { id: detail.value.id }).then(res => {
				if (res.data.status == true) {
					getQrCode()
				} else {
					createOrder()
				}
			})
		}

	}
	const createOrder = () => {
		let source = 'weixin';
		// #ifdef H5
		if (WEBCONFIG?.value.epay_state == 1) {
			source = 'epay'
		} else {
			source = 'official'
		}
		// #endif
		$http.post('Order/createOrder', { range: detail.value.range, community_id: detail.value.id, source: source })
			.then(res => {
				if (detail.value.type == 3) {
					getQrCode()
				} else {
					pay(source, res.data.res).then(res1 => {
						popupCountShow.value = true
						getStatus(res.data.order_id)
					}).catch(err => {
						$tool.toast('支付失败')
					})
				}
			})
	}

	const getQrCode = () => {
		$http.get('Community/getQrcode', { id: detail.value.id }).then(res => {
			code.value = res.data
			setTimeout(() => {
				popupShow.value = true
			}, 500)
		}).catch(err => {
			uni.hideLoading()
		})

	}

	const getStatus = (id) => {
		$http.get('Order/getStatus', { id: id }).then(res => {
			if (res.data.status == true) {
				count.value = 10
				popupCountShow.value = false
				getQrCode()
			} else {
				if (count.value > 0) {
					setTimeout(() => {
						getStatus(id)
						count.value--
					}, 1000)
				} else {
					popupCountShow.value = false
					$tool.toast('查询订单状态失败')
				}
			}
		})
	}


	const getUserInfo = () => {
		const { setUserInfo, isLogin, clearUserInfo } = useUserStore()
		if (isLogin()) {
			$http.get('User/getUser').then(res => {
				setUserInfo(res.data)
			})
		} else {
			clearUserInfo()
		}
	}
</script>

<style>
	.animated-box {
		animation: growShrink 0.6s infinite alternate;
	}

	@keyframes growShrink {
		from {
			transform: scale(0.7);
		}

		to {
			transform: scale(1);
		}
	}

	.red {
		animation: shake 1.2s;
		animation-iteration-count: infinite;
	}


	@keyframes shake {
		40% {
			transform: rotate(0deg);
		}

		52% {
			transform: rotate(15deg);
		}

		64% {
			transform: rotate(-15deg);
		}

		76% {
			transform: rotate(15deg);
		}

		88% {
			transform: rotate(-15deg);
		}

		100% {
			transform: rotate(0deg);
		}
	}
</style>